
<template>
<div class="userList_box">
    <button class="addUserBtn" @click="adduser"> 添加用户</button>
    <span>{{ total }}</span>
    <table>
    <tr>
        <th>用户ID</th>
        <th>登录名</th>
        <th>金币数量</th>
        <th>用户等级</th>
        <th>操作</th>
    </tr>
    <tr v-for="it in list">
        <td>{{ it.id }}</td>
        <td>{{ it.name }}</td>
        <td>{{ it.score }}</td>
        <td>{{ it.level ==1 ? '显示普通会员' : it.level ==2 ? '显示VIP': '显示超级VIP'  }}</td>
        <td>
            <button @click="addScore(it.id)">增加金币</button>
            <button @click="addUserModel(it.id)">增加权限</button>
        </td>
    </tr>
</table>
</div>
</template>
  
<script setup>
import { onMounted, ref } from 'vue';
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {getUserList} from '../api/index.js'

const router = useRouter()
const store = useStore()
const adduser = () => {
    router.push({path: '/main/addUser'})
}
const total = ref(0)
const list = ref([])
onMounted(() => {
    // 获取用户列表
    let token = store.state.user.token;
    let res = getUserList(token, {
        page: 0,
        size:10
    })
    res.then((resp) => {
        // console.log('resppp', resp);
        let {data} = resp;
        if (data.code == 200) {
            let {resp_data} = data;
            store.dispatch('setUserList', resp_data)
            total.value = resp_data.total;
            for (let i = 0; i < resp_data.total; i++) {
                let it = resp_data.list[i];
                list.value.push(it)
            }
        }else {
            alert(data.code_msg)
        }
    }).catch(err=> {
        console.log(err);
    })
})
const addUserModel = (id) => {
   
    router.push({
        path:'/main/addModelValue',
        query: {
            id
        }
    })
}
const addScore = (user_id) => { 
    router.push({
        path:'/main/addScore',
        query: {
            user_id 
        }
    })
}
</script>


<style scoped>
.userList_box{
    widows: 500px;
    margin: 0 auto;
}
.addUserBtn {
    margin-top: 20px;
    margin-bottom: 20px;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}
th {
    background-color: #f2f2f2;
}
</style>
